<template>
  <view>
    <m-top :autoBack="true" :bgChangeByScroll="true" bgColor="#8C82FF" @getHeight="getGlHeight">
      <view class="c333 font32 fw500">展区详情</view>
    </m-top>

    <m-container :top="glTop">
      <view class="mgt32 pdv40">
        <u-swiper :list="list" height="400rpx"></u-swiper>

        <!--  -->
        <view class="mgt40">
          <panel-title>{{ detail.title }}</panel-title>
          <view class="mgt20 font28 c666">
            <u-parse :content="detail.desc"></u-parse>
          </view>
        </view>

         <!--  -->
         <view class="mgt40">
          <panel-title>位置</panel-title>
          <view class="mgt20 flex align-center font28 c481">
            <view class="text-ell">江苏省徐州市铜山区张集街道1264号403室</view>
            <view class="mglauto location">
              <image src="@/static/icon/detail-map.png"></image>
            </view>
          </view>
        </view>
      </view>
    </m-container>
  </view>
</template>

<script>
import GlTopMixin from "@/mixins/global-top";
import PanelTitle from "@/pages/index/components/title";
import data from '@/pages/hall/helper/index.js'

export default {
  mixins: [GlTopMixin],
  components: { PanelTitle },
  data() {
    return {
      detail: {},
      list: [],
    };
  },

  onLoad(options) {
    const id = options.id;
    const detail = data.find(v => v.id == id)
    console.log(data);
    this.detail = detail
    this.list.splice(0, 1, this.getImgUrl(detail.image))
  }
};
</script>

<style lang="scss" scoped>
.location {
  image {
    width: 24rpx;
    height: 32rpx;
  }
}
</style>
